<template>
  <div>
    <CloudTable
      class="test-table"
      :columns="columns"
      :dataSource="dataSource"
      :scroll="{ x: 1200 }"
    >
      <CloudButton slot="action" slot-scope="text, record, index" @click="actionBtn">{{
        record.name.substring(0, 10)
      }}</CloudButton>
    </CloudTable>
  </div>
</template>

<script>
  export default {
    title: '5.冻结列',
    subTitle: '普通列和操作列',
    data () {
      return {
        columns: [
          {
            title: 'name',
            dataIndex: 'name',
            width: 200,
            fixed: true
          },
          {
            title: 'Age',
            dataIndex: 'age',
            width: 500
          },
          {
            title: 'Age1',
            dataIndex: 'age1',
            width: 500
          },
          {
            title: 'Age2',
            dataIndex: 'age2',
            width: 500
          },
          {
            title: 'Sex',
            dataIndex: 'sex',
            width: 500
          },
          {
            title: 'Action',
            key: 'operation',
            fixed: 'right',
            width: 200,
            scopedSlots: { customRender: 'action' },
          },
        ],
        dataSource: [
          {
            key: '1',
            name: 'John Brown',
            age: 32,
            age1: '1111111111111111111111111111111111111111111111111111111111111111111111',
            age2: '1111111111111111111111111111111111111111111111111111111111111111111111',
            sex: '男'
          },
          {
            key: '2',
            name: 'Jim Green',
            age: 42,
            sex: '女'
          },
          {
            key: '3',
            name: 'Joe Black',
            age: 32,
            sex: '男'
          },
        ],
      }
    },
    methods: {
      actionBtn (e) {
        this.$cloudMessage.success({
          content: '你点击了按钮',
          top: '100px',
          duration: 2
        });
      },
    }
  }
</script>
<style lang="scss" scoped>
</style>